<template>
  <div class="custom-tab-bar">
    <div
      v-for="(item, index) in tabBarList"
      :key="index"
      class="tab-bar-item"
      @click="switchTab(item.pagePath)"
      :style="{
        color: currentPage === item.pagePath ? item.selectedColor : item.color,
      }"
    >
      <div :class="item.icon"></div>
      <span>{{ item.text }}</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, toRefs } from "vue";

import usePageStore from "@/store/modules/page";
const pageStore = usePageStore();
const { currentPage } = toRefs(pageStore);
const tabBarList = ref([
  {
    pagePath: "pages/index/index",
    text: "首页",
    icon: "i-carbon:list",
    color: "#7A7E83",
    selectedColor: "#3cc51f",
  },
  {
    pagePath: "pages/Bookstore/Bookstore",
    text: "书城",
    icon: "i-carbon:shopping-cart",
    color: "#7A7E83",
    selectedColor: "#3cc51f",
  },

  {
    pagePath: "pages/my/my",
    text: "我的",
    icon: "i-carbon:customer-service",
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    class: "user",
  },
]);

const switchTab = (pagePath: string) => {
  pageStore.setCurrentPage(pagePath);
  uni.redirectTo({ url: `/${pagePath}` });
};
</script>

<style scoped>
.custom-tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  background-color: #ffffff;
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
